<template>
    <el-card class="w-full pt-[5px] text-right backdrop-opacity-0 bg-transparent">
    <el-button type="primary" @click="handerBack" class=" text-xs">
      <el-image style="width: 20px; margin-right: 10px;" :src="backImgUrl" />
      <span>返回</span>
    </el-button>
  </el-card>
  <el-card class="w-full pt-[5px]">
    <div class="font-bold block-title">
     筛选条件
    </div>
    <el-divider class="mt-2"/>
    <el-form inline :model="searchForm" class="mt-[20px]" label-width="96px">
          <el-form-item label="工号">
            <el-input
              v-model="searchForm.number"
              placeholder="请输入工号"
              clearable
            />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input
              v-model="searchForm.name"
              placeholder="请输入姓名"
              clearable
            />
          </el-form-item>
          <el-form-item label="人事单位" >
            <el-select
              v-model="searchForm.unit"
              clearable
               style="min-width: 120px"
            >
              <el-option label="全部" value="1" />
              <el-option label="领导办" value="2" />
              <el-option label="财务处" value="3" />
              <el-option label="项目部" value="4" />
              <el-option label="市场部" value="5" />
              <el-option label="行政部" value="6" />
              <el-option label="人事部" value="7" />
            </el-select>
          </el-form-item>
          <el-form-item label="考核状态">
            <el-select v-model="searchForm.status" placeholder="请选择" style="min-width: 120px">
              <el-option label="全部" value="1" />
              <el-option label="已审核" value="2" />
              <el-option label="未审核" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item >
            <el-button type="warning" @click="searchFormOpen = !searchFormOpen"
              >
              <el-icon color="#fff" :size="19" class="mr-1">
                <Search />
              </el-icon>
              <span class="text-xs">查询</span>
            </el-button>
            <el-button type="success"><el-icon color="#fff" :size="19" class="mr-1">
                <RefreshRight />
              </el-icon>
              <span class="text-xs">重置</span>
            </el-button>
          </el-form-item>
          <!-- <div class="flex justify-end">
            <el-button type="warning" @click="searchFormOpen = !searchFormOpen"
              >
              <el-icon color="#fff">
                <Search />
              </el-icon>查询
            </el-button>
            <el-button type="success"><el-icon color="#fff">
                <RefreshRight />
              </el-icon>重置</el-button>
          </div> -->
   
    </el-form>
  </el-card>

  <el-card class="w-full pt-[5px] mt-[10px]">
    <div class="mb-[20px] text-right">
      <el-button type="primary" @click="handleCheck()">
        <el-icon class="mr-[5px]" :size="19"><Bell /></el-icon>
        <span class="text-xs">提醒考核</span>
      </el-button>
      <el-button type="primary" @click="handleCheck">
        <el-icon class="mr-[5px]" :size="19"><Document /></el-icon>
        <span class="text-xs">生成考核单</span>
      </el-button>
    </div>

    <el-table :data="tableData" class="w-full" stripe row-key="id">
      <!-- <el-table-column type="index" width="50" label="序号" /> -->
      <el-table-column prop="number" label="工号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="unit" label="人事单位" />
      <el-table-column prop="state" label="审核状态" >        
        <template #default="{ row }">
          <div v-if="row.state =='已审核'">
            <el-icon :size="18" class="align-middle"><CircleCheckFilled  class="text-[#5AD8A6] mr-1" /></el-icon>
            <span>{{ row.state }}</span>
          </div>
          <span v-else class="ml-[19px]">{{ row.state }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="result" label="考核结果" />
    </el-table>
    <div class="mt-[20px] flex justify-end">
      <el-pagination
        v-bind="pagination"
        @update:current-page="currentChange"
        @update:page-size="sizeChange"
      />
    </div>
  </el-card>
  <!-- <AddModel v-model="addModelVisible" /> -->
</template>

<script setup>
import { getToken } from "@/utils/auth";
import useAppStore from '@/store/modules/app'
import usePagination from "@/hooks/pagination";
import useOperate from "@/hooks/operate";
import CheckType from "@/views/project/components/CheckType.vue";
import AddModel from "./components/AddMd.vue";

const router = useRouter();
const appStore = useAppStore()
const { proxy } = getCurrentInstance();
const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex");
import backImgUrl from '@/assets/icons/arrowBack.png';

const searchFormOpen = ref(false);
const addModelVisible = ref(false);
const searchForm = ref({
  number: "",
  name: "",
  unit: "1",
  status: "1"
});
const { pagination, currentChange, sizeChange } = usePagination();
const { handleDelete } = useOperate();
pagination.total = 100;
const tableData = ref([
  {
    number: 10012,
    name: "张程",
    unit: "财务处",
    state: "未审核",
    result: "2,300"
  },
  {
    number: 10012,
    name: "李强",
    unit: "领导办",
    state: "已审核",
    result: "7,000"
  },
  {
    number: 10013,
    name: "习成",
    unit: "事业部",
    state: "未审核",
    result: "4,000"
  },
  {
    number: 10012,
    name: "兰飞",
    unit: "项目部",
    state: "已审核",
    result: "9,000"
  },
  {
    number: 10013,
    name: "田南",
    unit: "领导办",
    state: "已审核",
    result: "7,000"
  },
]);
const handerBack = () => {
 router.replace("/examine")
};
//点击删除
const handleDel = () => {
  handleDelete();
};
//点击审核
const handleCheck = () => {
  // addModelVisible.value = true;
};
</script>

<style scoped lang="scss">
.block-title{
  color: #454545;
  border-left: 7px solid #409EFF;
  padding-left: 12px;
  height: 36px;
  display: block;
  line-height: 36px;
  .des-title{
    font-size: 14px;
    font-weight: 400;
    color: #b4b6bb;
  }
}
</style>

